<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../js/dist/APlayer.min.css" />
		<link rel="stylesheet" href="../../css/mui.min.css" />
	</head>
	<style>
		.main {
			position: relative;
		}
		
		.mui-bar-nav {
			-webkit-box-shadow: none;
			box-shadow: none;
			background: none;
		}
		
		.mui-title,
		.mui-icon-left-nav {
			color: #fff;
		}
		
		.mui-content {
			width: 100%;
			background: url(../../imges/283974360740381381.png);
			background-size: cover;
			overflow: hidden;
		}
		
		.aplayer .aplayer-lrc {
			height: 50% !important;
		}
		
		.information {
			position: fixed;
			bottom: 104px;
			display: flex;
			text-align: center;
			right: 12px;
			transition: .2s;
		}
		
		.information>div {
			padding: 0 12px;
		}
		
		.frequency_text,
		.average_text {
			font-size: 12px;
			color: #62A0E2;
		}
		
		.average_num,
		.frequency_num {
			color: #B8DEF8;
		}
		
		.operation {
			position: fixed;
			bottom: 0;
			display: flex;
			width: 100%;
			padding: 24px;
			transition: .3s;
		}
		
		.operation>div {
			flex: 1;
			border-radius: 50px;
			overflow: hidden;
			margin-right: 24px;
		}
		
		.mui-btn-outlined.mui-btn-blue,
		.mui-btn-outlined.mui-btn-primary {
			color: #fff;
			border-color: #84A4DF;
		}
		
		.operation>div:last-child {
			background: #34d498;
			margin: 0;
		}
		
		.operation button {
			width: 100%;
			border-radius: 50px;
		}
		
		.countdown {
			position: fixed;
			top: 50%;
			left: 50%;
			text-align: center;
			margin-left: -46px;
			margin-top: -60px;
			font-size: 60px;
		}
		
		.countdown_opacity {
			border-radius: 50%;
			width: 92px;
			height: 92px;
			background: #fff;
			opacity: 0.5;
		}
		
		.countdown_num {
			position: absolute;
			top: 0;
			width: 92px;
			height: 92px;
			line-height: 92px;
			color: #fff;
		}
		
		.countdown_text {
			position: fixed;
			bottom: 84px;
			color: #71AAE6;
			width: 100%;
			text-align: center;
		}
		
		.countdown_time {
			margin-top: 32px;
		}
		
		.resultoperation {
			display: flex;
			padding: 0 24px;
			position: absolute;
			width: 100%;
			bottom: 24px;
		}
		
		.mui-btn-warning,
		.mui-btn-yellow {
			background: #FFA21A;
		}
		
		.resultoperation>button:first-child {
			margin-right: 24px;
		}
		
		.resultoperation button {
			width: 100%;
			border-radius: 50px;
		}
		
		.result {
			position: fixed;
			bottom: 0;
			width: 100%;
			z-index: 100;
			background: #fff;
			text-align: center;
			border-radius: 8px 8px 0 0;
			height: 44%;
			font-size: 12px;
			color: #B2B2B2;
			transition: .3s;
			padding-top: 24%;
		}
		
		.score {
			margin: 12% 0px;
		}
		
		.score_num {
			font-size: 30px;
			color: #F87171;
			margin-bottom: 8px;
		}
		
		.play {
			position: absolute;
			top: -46px;
			width: 100%;
			display: flex;
			padding: 0 16px;
		}
		
		.progress {
			flex: 1;
		}
		
		.progress>div {
			width: 80%;
			height: 2px;
			background: #6A9EDC;
			margin: 20px auto;
		}
		
		.play>div {
			display: inline-block;
		}
		
		.planzantin,
		.broadcasts,
		.resume {
			width: 40px;
		}
		
		.play .planzantin,
		.play .resume {
			display: none;
		}
		
		.planzantin>img,
		.broadcasts>img,
		.resume>img {
			width: 100%;
		}
		
		.plan_time {
			color: #fff;
			line-height: 40px;
			position: absolute;
			right: 16px;
		}
		
		.bombbox {
			position: fixed;
			width: 290px;
			z-index: 2000;
			top: 50%;
			left: 50%;
			margin-top: -25%;
			margin-left: -145px;
		}
		
		.bombbox img {
			width: 100%;
			vertical-align: middle;
			height: 100%;
		}
		
		.bombbox_img {
			height: 138px;
		}
		
		.success_data {
			position: absolute;
			top: 16px;
			right: 20px;
			text-align: center;
		}
		
		.integral {
			margin: 8% 0;
		}
		
		.determine {
			width: 122px;
		}
		
		.determine>button {
			width: 100%;
		}
		
		@media screen and (max-height:480px) {
			.aplayer .aplayer-lrc {
				height: 40px !important;
			}
			.countdown_time {
				margin-top: 20px;
			}
			.countdown_text {
				bottom: 60px;
			}
			.score {
				margin: 6% 0;
			}
		}
		/*发布成功弹窗*/
		
		.success {
			display: none;
		}
		/*录制结果的下弹窗*/
		
		.result {
			bottom: -100%;
		}
		/*倒计时*/
		
		.countdown_text {
			transform: translate(-100%);
			transition: .3s;
			font-size: 14px;
		}
		
		.countdown {
			transform: translate(-3000%);
			transition: 0.5s;
		}
		/*听听范例开始朗读*/
		
		.operation {
			/*display: none;*/
		}
		/*音频*/
		/*.aplayer-author {
			display: none;
		}
		*/
		/*.aplayer-music {
			display: none;
		}
		*/
		
		.aplayer .aplayer-info .aplayer-controller {
			position: fixed !important;
			bottom: 20px;
			left: 0;
			width: 90%;
			z-index: 100;
			margin-left: 5%;
			transform: translate(-120%);
			transition: .3s;
			padding: 40px 0 14px 0;
		}
		
		.aplayer {
			box-shadow: none;
			margin: 0;
		}
		/*自带播放*/
		
		.aplayer-pic {
			display: none;
		}
		
		.aplayer-withlrc.aplayer .aplayer-info {
			margin: 0;
			height: initial !important;
			padding: 10px 0;
		}
		
		.aplayer .aplayer-lrc {
			background: none;
			padding: 34% 0;
			margin: 10% 0 0!important;
			transition: .3s;
		}
		
		.aplayer .aplayer-lrc p {
			color: #fff !important;
			font-size: 16px !important;
			line-height: 30px!important;
			height: 30px!important;
		}
		
		.aplayer-bar-wrap {
			margin: 0 70px 0 70px !important;
			position: relative;
			z-index: 4000;
		}
		
		.mask {
			position: absolute;
			height: 72px;
			top: 0px;
			width: 100%;
		}
		
		.mask img {
			width: 100%;
			height: 100%;
		}
		
		.close {
			width: 50px;
			height: 50px;
			position: absolute;
			top: 10px;
			left: 12px;
			border-radius: 50%;
		}
		
		.suspend {
			background: url("../../imges/zantin.png")no-repeat 8px 6px;
			background-size: 34px;
			display: none;
		}
		
		.broadcast {
			background: url("../../imges/ggGroup 1492.png");
			background-size: cover;
		}
		
		.close>img,
		.state>img {
			width: 100%;
		}
		
		.state {
			width: 50px;
			height: 50px;
			position: absolute;
			top: 10px;
			background: url("../../imges/Group 1492remo.png");
			background-size: cover;
			right: 12px;
			border-radius: 50%;
		}
		
		.aplayer-played {
			background: #fff !important;
		}
		
		.aplayer .aplayer-lrc p.aplayer-lrc-current {
			transform: scale(1.1, 1.1);
			transition: .2s;
		}
		
		.aplayer-time {
			position: absolute !important;
			top: 16px;
			right: 70px !important;
			color: #fff !important;
		}
		
		.aplayheade {
			overflow: hidden;
		}
	</style>

	<body>
		<div class="main">
			<header class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 class="mui-title"></h1>
			</header>
			<div class="mui-content">
				<!--<div class="song">
					<div>
						<div>解落三秋叶</div>
						<div>能开二月花</div>
						<div>夜来风雨声</div>
						<div>花落知多少</div>
						<div>能开二月花</div>
						<div>夜来风雨声</div>
						<div>能开二月花</div>
						<div>花落知多少</div>
						<div>夜来风雨声</div>
						<div>能开二月花</div>
					</div>
				</div>-->
				<div class="aplayheade">
					<div id="player3" class="aplayer"></div>
				</div>
			</div>
			<div class="information">
				<div class="frequency">
					<div class="frequency_num">0</div>
					<div class="frequency_text">读过人次</div>
				</div>
				<!--<div class="average">
					<div class="average_num">0</div>
					<div class="average_text">平均分</div>
				</div>-->
			</div>
			<div class="operation">
				<div><button type="button" class="mui-btn mui-btn-primary mui-btn-outlined example">听听范例</button></div>
				<div class="start"><button type="button" class="mui-btn mui-btn-success">开始朗读</button></div>
			</div>

			<!--<div class="countdown">
				<div class="countdown_opacity"></div>
				<div class="countdown_num">3</div>
			</div>-->

		</div>
		<script src="../../js/libs/aplayer.js"></script>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/libs/zepto_1.1.3.js"></script>
		<script src="../../js/common/common.js"></script>
		<script type="text/javascript">
			mui.init()
			mui.plusReady(function() {
				$(".mui-content").height($(window).height())
				$(".aplayheade").height($(".mui-content").height() - 125)
				var self = plus.webview.currentWebview();
				var obj = self.parameter;
				console.log(obj.caseuid)
				common.ajax("student/reading/queryPage", {
					uid: common.uid,
					token: common.token,
					caseUid: obj.caseuid
				}, function(data) {
					if(data.code == 200) {
						muisrc(data)
						//						console.log(data)
						$(".main").attr("uid", data.data.uid)
						$(".mui-title").text(data.data.caseName)
						$(".average_num").text(data.data.averageScore)
						$(".frequency_num").text(data.data.readingCount)
					} else {
						mui.toast(data.message)
					}
				}, "get")

				document.addEventListener("plusready", onPlusReady, false);

				var r = null;
				// 扩展API加载完毕，现在可以正常调用扩展API 
				function onPlusReady() {
					r = plus.audio.getRecorder();
				}

				function muisrc(data) {
					var time = []
					$.each(data.data.caseTimeList, function(e, a) {
						if(data.length = 4) {
							a = "0" + a
						}
						time.push(a.split(".").join(":") + '.00')
					})
					console.log(data.data.caseUrl)
					var temp = ""
					for(var i = 0; i < data.data.caseLycList.length; i++) {
						temp += '[' + time[i] + ']' + data.data.caseLycList[i] + "\n"
					}
					var ap3 = new APlayer({
						element: document.getElementById('player3'),
						narrow: false,
						autoplay: false,
						showlrc: 1,
						mutex: true,
						theme: '#615754',
						preload: 'metadata',
						mode: 'circulation',
						music: {
							title: data.data.caseName,
							author: '',
							url: data.data.caseUrl,
							pic: '',
							lrc: temp
						}
					});

					ap3.on('ended', function() {
						$(".suspend").hide()
						$(".broadcast").show()
						/*$(".broadcasts").show()
						$(".planzantin").hide()*/
					});
					$('.example').on("tap", function() {
						$(this).parents(".operation").css({
							'transform': 'translate(100%)'
						})
						$(".aplayer-controller").css({
							'transform': 'translate(0)'
						})
					})
					$(".broadcast").on("tap", function() {
						ap3.play()
						$(this).hide()
						$(".suspend").show()

					})
					$(".suspend").on("tap", function() {
						ap3.pause()
						$(this).hide()
						$(".broadcast").show()
					})
					$(".state").on("tap", function() {
						ap3.pause()
						$(".suspend").hide()
						$(".broadcast").show()
						$(".operation").css({
							'transform': 'translate(0%)'
						})
						$(".aplayer-controller").css({
							'transform': 'translate(-120%)'
						})
					})
				}
				$(document).on("tap", ".start", function() {
					common.open("recording.html", "recording.html", obj)
				})
			})
		</script>
	</body>

</html>